<template>
  <div class="heard">  
    <div  
      style="  
        height: 4vh;  
        display: flex;  
        justify-content: space-between;  
        align-items: center;  
      "  
      @click="goBack"  
    >  
      <img :src="backIcon" alt="返回" />  
    </div>  
    <div style="  
        display: flex;  
        justify-content: space-between;  
        align-items: center;  
      " >
      <div >{{ title }}</div>
      
      </div> 

    <div>
      <el-select class="no-arrow" :show-arrow="false" :disabled="!hasOptions" v-model="selectVal" :placeholder="placeholder" @change="selectChange" style="width: 8vw;">
      <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    >
    </el-option>
  </el-select>
    </div>
  </div>

</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref, computed } from "vue";  
import { defineProps } from 'vue'; 
import fanhui from "@/assets/imgs/左箭头.png";


const props = defineProps({  
  title: {  
    type: String,  
    required: true,  
  },
  title1: {  
    type: String,  
    required: true,  
  },  
  modelValue: {  
    type: String,  
    required: true, 
    default: ''  // 默认值为空字符串  
  },  
  backIcon: {  
    type: String,  
    default: fanhui, // 设置默认图标路径  
  }, 
  
  options: {
    type: Array,
    default: () => []
  },
  placeholder: {
    type: String,
    default: ''
  } 
});  

const emits = defineEmits(['update:modelValue', 'onChangeSelect']);

const hasOptions = computed(() => {  
  return props.options && props.options.length > 0;  
});  

const selectVal = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits('update:modelValue', val);
  }
});
const selectChange = (val) => {
  if (hasOptions.value) { 
  console.log(val);
  emits('onChangeSelect', val);
  }
};

const router = useRouter(); 
// 返回上一级页面的函数  
const goBack = () => {  
  router.back();  
}; 
</script>

<style scoped>
.heard {
  /* position: fixed; /* 固定位置 */
  /*top: 60px; /* 距离顶部 10px */
  /*left: 50%; /* 居中 */
  /*transform: translateX(-50%); /* 垂直居中调整 */
  z-index: 1000;
  width: 100%;
  height: 6vh;
  text-align: center;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0vh 4vw;
}

:deep(.el-select__wrapper){
box-shadow: none;
background-color: #f9f9f9;
font-size: 16px;
}
:deep(.el-select__wrapper){
box-shadow: none !important;
}
.no-arrow .el-input__suffix {  
  display: none; /* 隐藏下拉箭头图标 */  
} 

/* 隐藏Element UI中el-select的图标 */
.no-arrow + .el-input__suffix i.el-icon-arrow-up:before,
.no-arrow + .el-input__suffix i.el-icon-arrow-down:before {
  content: none;
}
</style>